<template>
  <div class="app-container">
    <el-row style="margin-bottom:30px;">
      <el-col :span="24" style="padding-left: 5px;">
        <el-steps :active="step" process-status="finish" finish-status="success" simple>
          <el-step title="基本信息"></el-step>
          <el-step title="规格参数"></el-step>
          <el-step title="销售属性"></el-step>
          <el-step title="SKU信息"></el-step>
          <el-step title="发布"></el-step>
        </el-steps>
      </el-col>
      <el-col :span="24" v-show="step===0">
        <el-card style="margin:0 0 5px 5px">
          <el-form ref="spuInfoForm" :model="spuInfo" label-width="120px" :rules="spuInfoRules">
            <el-form-item label="商品名称" prop="spuName">
              <el-input v-model="spuInfo.spuName" />
            </el-form-item>
            <el-form-item label="商品描述" prop="spuDescription">
              <el-input v-model="spuInfo.spuDescription" type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" />
            </el-form-item>
            <el-form-item label="所属分类" prop="catalogPath">
              <el-cascader
                v-model="spuInfo.catalogPath"
                filterable
                clearable
                placeholder="试试搜索：手机"
                :options="categoryData"
                :props="categoryProps"
                @change="handleChangeCatalog"
              />
            </el-form-item>
            <el-form-item label="选择品牌" prop="brandId">
              <el-select placeholder="请选择" v-model="spuInfo.brandId" filterable clearable>
                <el-option
                  v-for="item in brandData"
                  :key="item.brandId"
                  :label="item.name"
                  :value="item.brandId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品重量(Kg)" prop="weight">
              <el-input-number v-model.number="spuInfo.weight" :min="0" :precision="3" :step="0.1" />
            </el-form-item>
            <el-form-item label="积分设置" prop="bounds">
              <label class="m-l-10 m-r-5">金币</label>
              <el-input-number v-model="spuInfo.bounds.buyBounds" style="width:130px" :min="0" controls-position="right" />
              <label class="m-l-10 m-r-5">成长值</label>
              <el-input-number v-model="spuInfo.bounds.growBounds" style="width:130px" :min="0" controls-position="right" />
            </el-form-item>
            <el-form-item label="商品图集" prop="spuImages">
              <file-viewer v-model="spuInfo.spuImages" :limit="9" :table-query="imageTableQuery" :file-data="spuImages" @getFileData="getSpuImageData" />
            </el-form-item>
            <el-form-item label="商品介绍" prop="introduce">
              <tinymce-editor ref="tinymce" v-model="spuInfo.introduce" :content="spuInfo.introduce" :height="400" @close="resetData" />
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="generateBaseAttrs">下一步：设置规格参数</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="24" v-show="step===1">
        <el-card style="margin:0 0 5px 5px">
          <el-tabs tab-position="left" style="width:80%">
            <el-tab-pane
              v-for="(group, g_index) in attrData.attrGroups"
              :key="group.attrGroupId"
              :label="group.attrGroupName"
            >
              <el-row :gutter="20">
                <el-col :span="20">
                  <el-form ref="baseAttrForm" label-width="120px">
                    <el-form-item
                      v-for="(attr, a_index) in group.attrs"
                      :key="attr.attrId"
                      :label="attr.attrName"
                    >
                      <el-input v-model="attrData.baseAttrs[g_index][a_index].attrId" type="hidden" v-show="false" />
                      <el-select
                        v-model="attrData.baseAttrs[g_index][a_index].attrValue"
                        :multiple="attr.valueType === '1'"
                        filterable
                        allow-create
                        default-first-option
                        placeholder="请选择或输入值"
                        class="m-l-10 w-75"
                      >
                        <el-option
                          v-for="(val, v_index) in attr.valueSelect.split(';')"
                          :key="v_index"
                          :label="val"
                          :value="val"
                        />
                      </el-select>
                      <el-checkbox
                        v-model="attrData.baseAttrs[g_index][a_index].showDesc"
                        true-label="0"
                        false-label="1"
                        class="m-l-10"
                      >
                        是否使用
                      </el-checkbox>
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-col :span="4">
                  <el-button @click="handleBaseAttr(group.attrGroupId)" type="primary" size="mini" circle icon="el-icon-plus" />
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
          <div style="margin:auto">
            <el-button type="primary" @click="step = 0">上一步</el-button>
            <el-button type="success" @click="generateSaleAttrs">下一步：设置销售属性</el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24" v-show="step===2">
        <el-card style="margin:0 0 5px 5px">
          <div slot="header" class="clearfix">
            <label class="m-b-20">选择销售属性</label>
            <el-button class="fr" @click="handleSaleAttr()" type="primary" size="mini" circle icon="el-icon-plus" />
            <el-form ref="sale_attr_form" :model="spuInfo" label-width="120px">
              <el-form-item
                v-for="(attr, a_index) in attrData.saleAttrs"
                :key="attr.attrId"
                :label="attr.attrName"
              >
                <el-input v-model="attrData.tempSaleAttrs[a_index].attrId" type="hidden" v-show="false" />
                <el-checkbox-group v-model="attrData.tempSaleAttrs[a_index].attrValue">
                  <el-checkbox
                    v-if="attrData.saleAttrs[a_index].valueSelect !== ''"
                    v-for="val in attrData.saleAttrs[a_index].valueSelect.split(';')"
                    :key="val"
                    :label="val"
                  />
                  <div style="margin-left:20px;display:inline">
                    <el-button
                      v-show="!inputVisible[a_index].view"
                      class="button-new-tag"
                      size="mini"
                      @click="showInput(a_index)"
                    >+自定义</el-button>
                    <el-input
                      v-show="inputVisible[a_index].view"
                      v-model="inputValue[a_index].val"
                      :ref="'saveTagInput'+a_index"
                      size="mini"
                      style="width:150px"
                      @keyup.enter.native="handleInputConfirm(a_index)"
                      @blur="handleInputConfirm(a_index)"
                    />
                  </div>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </div>
          <el-button type="primary" @click="step = 1">上一步</el-button>
          <el-button type="success" @click="generateSkuInfo">下一步：设置SKU信息</el-button>
        </el-card>
      </el-col>
      <el-col :span="24" v-show="step===3">
        <el-card style="margin:0 0 5px 5px">
          <el-table :data="spuInfo.skuInfos" style="width: 100%">
            <el-table-column label="属性组合">
              <el-table-column v-for="(item,index) in attrData.tableAttrColumn" :key="'attr_' + item.attrId" :label="item.attrName">
                <template slot-scope="scope">
                  <label style="margin-left: 10px">{{ scope.row.attrs[index].attrValue }}</label>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="商品名称" prop="skuName" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-tooltip placement="top">
                  <div slot="content">{{ scope.row.skuName }}</div>
                  <el-input v-model="scope.row.skuName" />
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="标题" prop="skuTitle" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-tooltip placement="top">
                  <div slot="content">{{ scope.row.skuTitle }}</div>
                  <el-input v-model="scope.row.skuTitle" />
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="副标题" prop="skuSubtitle" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-tooltip placement="top">
                  <div slot="content">{{ scope.row.skuSubtitle }}</div>
                  <el-input v-model="scope.row.skuSubtitle" />
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="价格" prop="price">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.price" :precision="2" :min="0" controls-position="right" />
              </template>
            </el-table-column>
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-row>
                  <el-col :span="24">
                    <label style="display:block;float:left;margin-right: 10px;">选择图集 或</label>
                    <file-viewer v-model="uploadImages" :list-type="'text'" :show-file-list="false" :limit="9" />
                  </el-col>
                  <el-col :span="24">
                    <el-divider />
                  </el-col>
                  <el-col :span="24">
                    <el-card
                      style="width:170px;float:left;margin: 15px 0 0 15px;"
                      :body-style="{ padding: '0px' }"
                      v-for="(img, index) in spuInfo.spuImages"
                      :key="'sku_table_image_' + index"
                    >
                      <img :src="getImageSrc(img)" style="width:160px;height:120px" />
                      <div style="padding: 14px;">
                        <el-row>
                          <el-col :span="8">
                            <el-checkbox v-model="scope.row.images[index].imgUrl" :key="'sku_image_check_' + index" :true-label="img" false-label />
                          </el-col>
                          <el-col :span="16">
                            <el-tag>
                              <el-radio v-model="scope.row.images[index].defaultImg" label="0" @click.native.prevent="checkSkuDefaultImg(scope.row, index, img)">设为默认</el-radio>
                            </el-tag>
                          </el-col>
                        </el-row>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
                <!-- 折扣，满减，会员价 -->
                <el-form :model="scope.row">
                  <el-row class="m-t-10">
                    <el-col :span="24">
                      <el-form-item label="设置折扣">
                        <label>满</label>
                        <el-input-number
                          style="width:160px"
                          v-model="scope.row.fullCount"
                          :min="0"
                          controls-position="right"
                        />
                        <label>件</label>
                        <label style="margin-left:15px;">打</label>
                        <el-input-number
                          style="width:160px"
                          v-model="scope.row.discount"
                          :precision="2"
                          :max="1"
                          :min="0"
                          :step="0.01"
                          controls-position="right"
                        />
                        <label class="m-r-10">折</label>
                        <el-checkbox
                          v-model="scope.row.countStatus"
                          true-label="0"
                          false-label="1"
                        >可叠加折扣</el-checkbox>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="设置满减">
                        <label>满</label>
                        <el-input-number
                          style="width:160px"
                          v-model="scope.row.fullPrice"
                          :step="100"
                          :min="0"
                          controls-position="right"
                        />
                        <label>元</label>
                        <label style="margin-left:15px;">减</label>
                        <el-input-number
                          style="width:160px"
                          v-model="scope.row.reducePrice"
                          :step="10"
                          :min="0"
                          controls-position="right"
                        />
                        <label class="m-r-10">元</label>
                        <el-checkbox
                          v-model="scope.row.priceStatus"
                          true-label="0"
                          false-label="1"
                        >可叠加满减优惠</el-checkbox>
                      </el-form-item>
                    </el-col>

                    <el-col :span="24">
                      <el-form-item label="设置会员价" v-if="scope.row.memberPrice.length>0">
                        <br>
                        <el-form-item class="m-b-10 m-l-20" v-for="(memberLevel, m_index) in scope.row.memberPrice" :key="memberLevel.id">
                          {{ memberLevel.name }}
                          <el-input-number
                            style="width:160px"
                            v-model="scope.row.memberPrice[m_index].price"
                            :precision="2"
                            :min="0"
                            controls-position="right"
                          />
                        </el-form-item>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="primary" @click="step = 2">上一步</el-button>
          <el-button type="success" @click="submitSkuInfo">下一步：保存商品信息</el-button>
        </el-card>
      </el-col>
      <el-col :span="24" v-show="step===4">
        <el-card style="margin:0 0 5px 5px">
          <el-row type="flex" justify="center">
            <el-col :span="24">
              <h1>保存成功</h1>
              <el-button type="primary" @click="addNext">继续添加</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <attr-form-dialog v-if="openAttrFormDialog" ref="attrForm" @confirmForm="getAttrs" />
  </div>
</template>

<script>
import { brandList } from '@/api/mall/product/brand'
import { memberLevelList } from '@/api/system/member'
import { categoryTreeData } from '@/api/mall/product/category'
import { fileManageTable } from '@/api/tool/file'
import { groupAttrInfo } from '@/api/mall/product/attrgroup'
import { spuSave } from '@/api/mall/product/spu'
import FileViewer from '@/components/FileViewer'
import AttrFormDialog from '@/views/mall/product/attr/base/form/dialog'

export default {
  components: {
    FileViewer,
    AttrFormDialog
  },
  data() {
    return {
      step: 0,
      brandData: [],
      categoryProps: {
        value: 'id',
        label: 'name'
      },
      categoryData: [],
      spuInfo: {
        spuName: '',
        spuDescription: '',
        catalogId: 0,
        catalogPath: [],
        brandId: undefined,
        weight: 0,
        bounds: {
          buyBounds: 0,
          growBounds: 0
        },
        spuImages: [],
        introduce: '',
        publishStatus: '0',
        attrs: [],
        skuInfos: []
      },
      spuInfoRules: {
        spuName: [{ required: true, message: '请输入商品名字', trigger: 'blur' }],
        spuDescription: [{ required: true, message: '请输入商品描述', trigger: 'blur' }],
        catalogPath: [{ required: true, message: '请选择所属分类', trigger: 'blur' }],
        brandId: [{ required: true, message: '请选择商品品牌', trigger: 'blur' }],
        spuImages: [{ required: true, message: '请上传商品图集', trigger: 'blur' }],
        introduce: [{ required: true, message: '请填写商品介绍', trigger: 'blur' }]
      },
      openAttrFormDialog: false,
      curAttrType: undefined,
      attrData: {
        attrGroups: [],
        baseAttrs: [],
        saleAttrs: [],
        tempSaleAttrs: [],
        tableAttrColumn: [],
        memberLevels: [],
        step: [false, false, false, false, false]
      },
      inputVisible: [],
      inputValue: [],
      spuImages: [],
      skuImages: [],
      uploadImages: [],
      imageTableQuery: {
        page: 1,
        limit: 99,
        total: 0
      }
    }
  },
  mounted() {
    this.init()
  },
  watch: {
    uploadImages(val) {
      let spuImages = Array.from(new Set(this.spuInfo.spuImages.concat(val)))
      this.spuInfo.skuInfos.forEach((skuInfo, index) => {
        let len = spuImages.length - this.spuInfo.skuInfos[index].images.length
        if (len > 0) {
          let images = new Array(len)
          images = images.fill({ imgUrl: '', defaultImg: '1' })
          this.spuInfo.skuInfos[index].images = skuInfo.images.concat(images)
        }
      })

      this.spuInfo.spuImages = spuImages
    }
  },
  methods: {
    init() {
      this.$nextTick(() => {
        this.getBrandData()
        this.getCategoryData()
        this.getMemberLevelData()
        this.$refs.tinymce.update('')
      })
    },
    getImageSrc(key) {
      return this.$api.getImageSrc(key)
    },
    getBrandData() {
      brandList().then(response => {
        this.brandData = response
      })
    },
    getCategoryData() {
      categoryTreeData({
        from: 'vue',
        excludeRoot: 'true'
      }).then(response => {
        this.categoryData = response
      }).catch(() => {})
    },
    getMemberLevelData() {
      memberLevelList().then(response => {
        this.attrData.memberLevels = response
      }).catch(() => {})
    },
    handleChangeCatalog(value) {
      this.spuInfo.catalogId = value[value.length - 1]
    },
    getSpuImageData() {
      fileManageTable({ Q_fileId_S_IN: this.spuInfo.spuImages.join(',') }).then(response => {
        this.spuImages = response.param.data
      }).catch(() => {})
    },
    addNext() {
      this.step = 0
      this.resetData()
    },
    generateBaseAttrs() {
      this.$refs.spuInfoForm.validate(valid => {
        if (valid) {
          this.step = 1
          this.getBaseAttrs()
        } else {
          return false
        }
      })
    },
    getBaseAttrs() {
      if (!this.attrData.step[0]) {
        groupAttrInfo(this.spuInfo.catalogId, { attrType: '1' }).then(response => {
          this.attrData.baseAttrs = []
          let attrs = []
          response.forEach(item => {
            item.attrs.forEach(info => {
              attrs.push({
                attrId: info.attrId,
                attrValue: '',
                showDesc: info.showDesc
              })
            })
          })
          this.attrData.baseAttrs.push(attrs)
          this.attrData.step[0] = true
          this.attrData.attrGroups = response
        }).catch(e => {})
      }
    },
    handleBaseAttr(groupId) {
      this.curAttrType = 'base'
      this.openAttrFormDialog = true
      this.$nextTick(() => {
        this.$refs.attrForm.init(undefined, this.spuInfo.catalogId, '1', groupId)
      })
    },
    generateSaleAttrs() {
      this.step = 2
      this.spuInfo.attrs = []
      this.attrData.baseAttrs.forEach(info => {
        info.forEach(attr => {
          let { attrId, attrValue, showDesc } = attr
          if (attrValue !== '') {
            if (attrValue instanceof Array) {
              attrValue = attrValue.join(';')
            }
            this.spuInfo.attrs.push({ attrId, attrValue, showDesc })
          }
        })
      })

      this.getSaleAttrs()
    },
    getSaleAttrs() {
      if (!this.attrData.step[1]) {
        groupAttrInfo(this.spuInfo.catalogId, { attrType: '0' }).then(response => {
          this.attrData.saleAttrs = []
          response.forEach(item => {
            item.attrs.forEach(attr => {
              this.attrData.tempSaleAttrs.push({
                attrId: attr.attrId,
                attrName: attr.attrName,
                attrValue: []
              })
              this.attrData.saleAttrs.push(attr)
              this.inputVisible.push({ view: false })
              this.inputValue.push({ val: '' })
            })
          })

          this.attrData.step[1] = true
        }).catch(e => {})
      }
    },
    handleSaleAttr() {
      this.curAttrType = 'sale'
      this.openAttrFormDialog = true
      this.$nextTick(() => {
        this.$refs.attrForm.init(undefined, this.spuInfo.catalogId, '0')
      })
    },
    getAttrs() {
      if ('base' === this.curAttrType) {
        let tempAttrs = []
        tempAttrs.push(this.attrData.baseAttrs)
        groupAttrInfo(this.spuInfo.catalogId, { attrType: '1' }).then(response => {
          let attrs = []
          this.attrData.baseAttrs = []
          response.forEach(item => {
            item.attrs.forEach(info => {
              let index = tempAttrs.findIndex((item_) => {
                return item_.attrId === info.attrId
              })
              if (index === -1) {
                attrs.push({
                  attrId: info.attrId,
                  attrValue: '',
                  showDesc: info.showDesc
                })
              }
            })
          })

          this.attrData.baseAttrs.push(attrs)
          this.attrData.attrGroups = response
        }).catch(e => {})
      } else {
        let tempAttrs = []
        tempAttrs.push(this.attrData.saleAttrs)
        groupAttrInfo(this.spuInfo.catalogId, { attrType: '0' }).then(response => {
          this.attrData.saleAttrs = []
          response.forEach(item => {
            item.attrs.forEach(info => {
              let index = tempAttrs.findIndex((item_) => item_.attrId === info.attrId)
              if (index === -1) {
                this.attrData.tempSaleAttrs.push({
                  attrId: info.attrId,
                  attrName: info.attrName,
                  attrValue: []
                })
                this.attrData.saleAttrs.push(info)
                this.inputVisible.push({ view: false })
                this.inputValue.push({ val: '' })
              }
            })
          })

          this.attrData.step[1] = true
        }).catch(e => {})
      }
    },
    showInput(index) {
      this.inputVisible[index].view = true
    },
    handleInputConfirm(index) {
      let inputValue = this.inputValue[index].val
      if (inputValue) {
        if (this.attrData.saleAttrs[index].valueSelect === '') {
          this.attrData.saleAttrs[index].valueSelect = inputValue
        } else {
          this.attrData.saleAttrs[index].valueSelect += ';' + inputValue
        }
      }
      this.inputVisible[index].view = false
      this.inputValue[index].val = ''
    },
    generateSkuInfo() {
      this.step = 3
      // 生成skuInfo
      let selectValues = []
      this.attrData.tableAttrColumn = []
      this.attrData.tempSaleAttrs.forEach(item => {
        if (item.attrValue.length > 0) {
          selectValues.push(item.attrValue)
          this.attrData.tableAttrColumn.push(item)
        }
      })

      let skuInfos = []
      let descartes = this.descartes(selectValues)
      descartes.forEach((descry, index) => {
        let attrs = []
        descry.forEach((value, index) => {
          // 构造saleAttr信息
          attrs.push({
            attrId: this.attrData.tableAttrColumn[index].attrId,
            attrName: this.attrData.tableAttrColumn[index].attrName,
            attrValue: value
          })
        })

        // 初始化会员价
        let memberPrices = []
        if (this.attrData.memberLevels.length > 0) {
          for (let i = 0; i < this.attrData.memberLevels.length; i++) {
            if (this.attrData.memberLevels[i].privilegeMemberPrice === 0) {
              memberPrices.push({
                id: this.attrData.memberLevels[i].id,
                name: this.attrData.memberLevels[i].name,
                price: 0
              })
            }
          }
        }

        let spuImages = []
        this.spuImages.forEach(image => {
          spuImages.push({
            imgUrl: image.fileId,
            defaultImg: '1'
          })
        })

        // 计算sku信息笛卡尔组合
        let result = this.descartesSku(this.spuInfo.skuInfos, descry)
        if (result === null) {
          skuInfos.push({
            attrs: attrs,
            skuName: this.spuInfo.spuName + ' ' + descry.join(' '),
            price: 0,
            skuTitle: this.spuInfo.spuName + ' ' + descry.join(' '),
            skuSubtitle: '',
            images: spuImages,
            descry: descry,
            fullCount: 0,
            discount: 0,
            countStatus: '0',
            fullPrice: 0.0,
            reducePrice: 0.0,
            priceStatus: '0',
            memberPrice: new Array().concat(memberPrices)
          })
        } else {
          skuInfos.push(result)
        }
      })
      this.spuInfo.skuInfos = skuInfos
    },
    checkSkuDefaultImg(row, index, img) {
      row.images.forEach((item, _index) => {
        if (_index !== index) {
          row.images[_index].defaultImg = '1'
        } else {
          row.images[index].imgUrl = img
          row.images[index].defaultImg = '0'
        }
      })
    },
    descartesSku(skuInfos, descry) {
      let result = null
      if (skuInfos.length > 0) {
        for (let i = 0; i < skuInfos.length; i++) {
          if (skuInfos[i].descry.join(' ') === descry.join(' ')) {
            result = skuInfos[i]
          }
        }
      }
      return result
    },
    // 笛卡尔积运算
    descartes(specs) {
      if (!specs || specs.length === 0) {
        return []
      } else {
        return this.joinSpec([[]], specs, 0 ,specs.length -1)
      }
    },
    joinSpec(prev, specs, i, max) {
      let currents = [], current, currentSpecs = specs[i]
      if (i > max) {
        return prev
      }

      prev.forEach(prev_ => {
        currentSpecs.forEach(spec => {
          current = prev_.slice(0)
          current.push(spec)
          currents.push(current)
        })
      })

      return this.joinSpec(currents, specs, ++i, max)
    },
    submitSkuInfo() {
      this.$confirm('提交商品数据需要一小段时间，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$modal.loading('保存商品中，请稍后。。。')
        spuSave(this.spuInfo).then(response => {
          this.$modal.msgSuccess(response.msg)
          this.step = 4
          this.$modal.closeLoading()
        }).catch(() => {
          this.$modal.closeLoading()
        })
      }).catch(e => {
        this.$modal.msgWarning('已取消')
      })
    },
    resetData() {
      this.$refs.tinymce.update('')
      this.spuInfo = {
        spuName: '',
        spuDescription: '',
        catalogId: 0,
        catalogPath: [],
        brandId: undefined,
        weight: 0,
        bounds: {
          buyBounds: 0,
          growBounds: 0
        },
        spuImages: [],
        introduce: '',
        publishStatus: '0',
        attrs: [],
        skuInfos: []
      }
    }
  }
}
</script>
